<template>
    <div class="login-container">
        <!-- 
            ref 相当于 id，对应按钮中函数传递的formName
            :model表单数据对象,对应data中的对象 
            label-width 表单域标签的的宽度 
        -->
        <el-form ref="etoak" :rules="rules" :model="form" label-width="90px" class="login-form">
            <h2 class="login-title">易途会员信息管理系统</h2>
            <!-- prop:对应验证中 rules:{对应这里:[]} -->
            <el-form-item label="用户姓名" prop="username">
                <!-- v-model:对应data中的对象 -->
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
                <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('etoak')">登录</el-button>
                <el-button @click="resetForm('etoak')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    /* 导入api中的login.js中的两个成员函数，这里非常类似后端中dao层 */
    import {login,getUserInfo} from '@/api/login'

    export default {
        data() {
            return {
                /* :model="对应这里" */
                form: {
                    /* 这里表示默认的值，如果书写值，则表单项中存在值 */
                    username: "",
                    password: ""
                },
                /* :rules="对应这里" */
                rules: {
                    /* prop="对应这里" */
                    username: [
                        /* 
                            required:是否必填
                            message:出错提示
                            trigger:何时进行验证，此处为失去焦点时
                        */
                        { required: true, message: "帐号不能为空", trigger: "blur" },
                        { min: 4, max: 8, message: '长度必须在4到8位之间', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: "密码不能为空", trigger: "blur" },
                        { min: 4, max: 8, message: '长度必须在4到8位之间', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            /* 提交表单 */
            submitForm(formName){
                /* 这个formName是形参也就是按钮中函数传递的值，也就是ref的值 */
                this.$refs[formName].validate(valid=>{
                    //console.log(valid)
                    /* 表单验证成功则valid为true */
                    if(valid){
                        login(this.form.username,this.form.password).then(response=>{
                            console.log(response.data)
                            const resp = response.data
                            /* 用户登录成功 */
                            if(resp.flag){
                                /* 获得用户资料 */
                                resp.token = 'admin'
                               /* 获取用户资料成功 */
                               
                                // 方便后面重新验证
                                /* 
                                    "token": "admin"
                                */
                                localStorage.setItem('etoak_cms_token', resp.token)
                                /* 调用路由前往首页 */
                                this.$router.push('/')
                                
                            
                            }else{
                                /* 登录失败 */
                                this.$message({
                                    message:resp.message,
                                    type:'warning',
                                })
                            }
                        })
                    }else{
                        /* 表单验证就没通过 */
                        this.$message({
                            message:'登录失败！请查看验证条件',
                            type:'warning',
                        })
                    }
                })
            },
            /* 重置表单 */
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
    }
</script>

<style scoped>
.login-form {
  width: 350px;
  /* 上下间隙 160px, 左右自动居中 */
  margin: 160px auto;
  background-color: rgb(255, 255, 255, 0.6);
  padding: 28px;
  border-radius: 60px;
}
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../../assets/login.jpg");
}
.login-title {
  color: #303133;
  text-align: center;
}
</style>